<template>
	<view class="store-list">
		<view class="store-item" @click="goDetail(item)" v-for="(item,index) in courseList" :key="index">
			<image class="store-image" :src="$util.img(item.image)" mode="aspectFill" lazy-load/>
			<view class="store-info">
				<view class="text-bold ellipsis-2 m-b-14">{{item.title}}</view>
				
				<view class="flex">
					<view class="tags3" v-if="item.video_url">视频</view>
					<view class="tags2" v-else>文章</view>
				</view>
				<view class="flex-y-center m-t-20">
					<i class="iconfont">&#xe649;</i>
					<text class="font-24 c-a4">{{item.view_num}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"course",
		props: {
			courseList: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			goDetail(item) {
				this.$util.redirectTo('/otherpages/social/detail?id='+item.class_id)
			},
		}
	}
</script>

<style lang="scss" scoped>
.store-list {
	.store-item {
		position: relative;
		margin: 24rpx 24rpx 0;
		padding: 24rpx;
		background: #fff;
		border-radius: 20rpx;
		display: flex;
		
		.store-image {
			width: 211rpx;
			height: 211rpx;
			border-radius: 20rpx;
			margin-right: 20rpx;
		}
		
		.store-info {
			width: 68%;
		}
		
	}
	.tags1 {
		font-size: 20rpx;
		color: #FF6619;
		border-radius: 10rpx;
		background: #FBEDE6;
		padding: 0 10rpx;
	}
	.tags2 {
		font-size: 20rpx;
		color: #0C7EFF;
		border-radius: 10rpx;
		padding: 0 10rpx;
		border: 1px solid #0C7EFF;
	}
	.tags3 {
		font-size: 20rpx;
		color: $color-title2;
		border-radius: 10rpx;
		padding: 0 10rpx;
		border: 1px solid $color-title2;
	}
}


  .iconfont  {
  	  font-size: 30rpx;
	  color: #A4A9B7;
	  margin-right: 10rpx;
  }
</style>